import BasicLayout from "@/core/components/layouts/BasicLayout"
import { getIdFromSlug, getNameFromSlug } from "@/core/utils/slug"
import ProductSearch from "@/lib/product/components/ProductSearch"
import { useRouter } from "next/router"
import _ from "lodash"
import Brand from "@/lib/brand/components/Brand"

export default function BrandDetail() {
  const router = useRouter()
  const { slug = '' } = router.query
  return (
    <BasicLayout>
      <Brand id={getIdFromSlug(slug)} />
      { !_.isEmpty(router.query) && (
        <ProductSearch
          query={_.omit(router.query, 'slug')}
          prefixUrl={`/shop/brands/${slug}`}
          defaultBrand={getNameFromSlug(slug)}
        />
      ) }
    </BasicLayout>
  )
}